<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  labelFlex="80px"
  (onSearch)="queryData($event)"
  (onReset)="resetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-4">
  <div nz-row nzJustify="space-between" nzAlign="bottom">
    <div nz-col class="opera-lf">
      <button
        *ngIf="permission.userPermission.has('storageCenter:out:add')"
        nz-button
        nzType="primary"
        class="m-r-8"
        routerLink="/storage-center/storage-exwarehous-edit"
        [queryParams]="{type: 0}"
      >新建</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:examine')"
        nz-button
        nzType="primary"
        nzDanger
        class="m-r-8"
        (click)="batchMergeListData()"
      >合并单据</button>

      <button
        nz-button
        nzType="primary"
        class="m-r-8"
        (click)="batchNoticeExwarehouse()"
      >通知出库</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:czOpera')"
        nz-button
        nzType="primary"
        class="mbtn-green m-r-8"
        disabled
        (click)="batchPackOver()"
      >打包完成</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:czOpera')"
        nz-button
        nzType="primary"
        class="mbtn-green m-r-8"
        disabled
        (click)="batchConfirmCk()"
      >确认出库</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:examine')"
        nz-button
        nzType="primary"
        nzDanger
        class="m-r-8"
        (click)="batchDeApprov()"
      >反审核</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:toVoid')"
        nz-button
        nzType="primary"
        nzDanger
        class="m-r-8"
        (click)="showTovoidModal()"
      >作废</button>

      <button
        *ngIf="permission.userPermission.has('storageCenter:out:signFor')"
        nz-button
        nzType="primary"
        nzDanger
        class="m-r-8"
        (click)="batchManualSign()"
      >手动签收</button>

      <button
        nz-button
        nzType="primary"
        class="mbtn-orange m-r-8"
        [nzLoading]="exportPickLoading"
        (click)="exportPickData()"
      >导出拣货信息</button>

      <button
        nz-button
        nzType="primary"
        class="mbtn-orange m-r-8"
        (click)="printOutOrder()"
      >打印快递面单</button>

      <button
        nz-button
        nzType="primary"
        class="mbtn-orange"
        (click)="noticeTakeParts()"
      >通知快递取件</button>
    </div>

    <div nz-col class="opera-rt">
      <!-- 进行中: 待审核、审核通过、待打包、待出库 -->
      <nz-radio-group
        [(ngModel)]="tabVal"
        nzButtonStyle="solid"
        (ngModelChange)="tabChange($event)">
        <label nz-radio-button [nzValue]="1">进行中</label>
        <label nz-radio-button [nzValue]="0">全部</label>
      </nz-radio-group>
    </div>
  </div>

  <div class="pagination-wrap-position p-t-15">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzWidth="50px"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="center" nzWidth="200px" nzLeft>出库单号</th>
          <th nzAlign="center" nzWidth="120px">出库类型</th>
          <th nzAlign="center" nzWidth="180px">关联单号</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="150px">配送方式</th>
          <th nzAlign="center" nzWidth="150px">物流信息</th>
          <th nzAlign="center" nzWidth="120px">打印次数</th>
          <th nzAlign="center" nzWidth="120px">出库仓库</th>
          <th nzAlign="center" nzWidth="120px">出库品质</th>
          <th nzAlign="center" nzWidth="150px">要求出库</th>
          <th nzAlign="center" nzWidth="150px">实际出库</th>
          <th nzAlign="center" nzWidth="170px">新建时间</th>
          <th nzAlign="center" nzWidth="280px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <td
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event)"
          ></td>
          <!-- 出库单号 -->
          <td nzAlign="center" nzLeft>
            <ng-container *ngIf="data.deliveryNumber; else elseTemplate">
              <a
                style="color: #409EFF;"
                routerLink="/storage-center/storage-exwarehous-details"
                [queryParams]="{id: data.id}"
              >
                {{ data.deliveryNumber || '-' }}
              </a>
            </ng-container>
            <ng-template #elseTemplate>
              -
            </ng-template>
          </td>
          <!-- 出库类型 -->
          <td nzAlign="center">
            <span>
              {{ filterText(outTypeOptions, data.type, 'content') }}
            </span>
          </td>
          <!-- 关联单号 -->
          <td nzAlign="center">
            <button
              nz-button
              nzType="link"
              [disabled]="!data.relationNum"
              nz-tooltip
              nzTooltipTitle="点击复制"
              (click)="copyText(data.relationNum)"
            >
              {{ data.relationNum || '-' }}
            </button>
          </td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.state | storeOutStatus: 'color'}">
              {{ data.state | storeOutStatus: 'label' }}
            </span>
          </td>
          <!-- 配送方式 -->
          <td nzAlign="center">
            <span>
              {{ data.deliveryMethod | storageDeliveryMethod: 'label' }}
            </span>
          </td>
          <!-- 物流信息 -->
          <td nzAlign="center">
            <p *ngIf="data.expressName">{{ data.expressName }}</p>
            <p>{{ data.expressNo || '-' }}</p>
          </td>
          <!-- 打印次数 -->
          <td nzAlign="center">{{ data.printCount || '0' }}</td>
          <!-- 出库仓库 -->
          <td nzAlign="center">
            <!-- {{ data.whPut || '-' }} -->
            {{ filterText(warehouseOptions, data.whId, 'id') }}
          </td>
          <!-- 出库品质 -->
          <td nzAlign="center">
            <span>
              {{ data.quality === 0 ? '不良品' : (data.quality === 1 ? '良品' : '-') }}
            </span>
          </td>
          <!-- 要求出库 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.deliveryContent !== data.actualDeliveryContent ? '#FF9900' : ''}">
              {{ data.deliveryContent || '-' }}
            </span>
          </td>
          <!-- 实际出库 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.deliveryContent !== data.actualDeliveryContent ? '#FF9900' : ''}">
              {{ data.actualDeliveryContent || '-' }}
            </span>
          </td>
          <!-- 新建时间 -->
          <td nzAlign="center">{{ data.createTime || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="link"
              nzSize="small"
              routerLink="/storage-center/storage-exwarehous-details"
              [queryParams]="{id: data.id}"
            >查看</button>

            <button
              *ngIf="permission.userPermission.has('storageCenter:out:add') && data.state === 0"
              nz-button
              nzType="link"
              nzSize="small"
              routerLink="/storage-center/storage-exwarehous-edit"
              [queryParams]="{type: 1, id: data.id}"
            >编辑</button>

            <button
              *ngIf="permission.userPermission.has('storageCenter:out:add') && data.state === 0"
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除?"
              (nzOnConfirm)="deleteItem(data)"
            >删除</button>

            <button
              *ngIf="permission.userPermission.has('storageCenter:out:add') && data.state === 0"
              nz-button
              nzType="link"
              nzSize="small"
              nz-popconfirm
              nzPopconfirmTitle="确认提交审核?"
              (nzOnConfirm)="submitReview(data)"
            >提交审核</button>

            <button
              *ngIf="permission.userPermission.has('storageCenter:out:examine') && data.state === 1"
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showExamineModal(data)"
            >审核</button>

            <button
              *ngIf="permission.userPermission.has('storageCenter:out:signFor') && data.state === 5"
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认签收?"
              (nzOnConfirm)="signforItem(data)"
            >签收</button>

            <!-- <button
              nz-button
              nzType="link"
              nzSize="small"
            >导出</button> -->

            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showFollowModal(data)"
            >跟进</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 跟进Component -->
<app-follow-up
  #followUpRef
  [initParams]="initParams"
  [ohterParams]="{ type: 0, sourceType: 99 }"
></app-follow-up>
<!-- E 跟进Component -->

<!-- S 审核 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isExamineVisible"
  [nzTitle]="'审核'"
  (nzOnCancel)="isExamineVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-textarea-count [nzMaxCharacterCount]="150">
        <textarea
          rows="4"
          nz-input
          maxlength="150"
          placeholder="请输入审核意见"
          [(ngModel)]="auditOpinion"
        ></textarea>
      </nz-textarea-count>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="subExamine(2)">审核通过</button>
        <button nz-button nzType="primary" nzDanger (click)="subExamine(9)">审核不通过</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 审核 Modal -->

<!-- S 作废 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isZfVisible"
  [nzTitle]="'提示'"
  (nzOnCancel)="isZfVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <p class="zf-tips">该操作不可逆，作废后该单将彻底不可操作</p>
      
      <nz-form-item>
        <nz-form-label nzRequired>备注</nz-form-label>
        <nz-form-control>
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              rows="4"
              nz-input
              maxlength="100"
              placeholder="请输入备注、必填"
              [(ngModel)]="toVoidRemark"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isZfVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitZfLoading" (click)="submitToVoidData()">确定作废</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 作废 Modal -->